<template>
  <div class="order">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="24">
        <el-col :span="8">
          <span>状态：</span>
          <el-select v-model="value" @change="changeOption" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          <span>搜索：</span><el-input v-model="queryForm.keyword" placeholder="请输入手机号/用户名/订单号"></el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="findKeyWord">查询</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-table :data="result.length?result:tableData" style="width: 100%">
      <el-table-column label="序号" prop="id"></el-table-column>
      <el-table-column label="编号" prop="nmb"></el-table-column>
      <el-table-column label="用户名" prop="username"></el-table-column>
      <el-table-column label="手机号" prop="tel"></el-table-column>
      <el-table-column label="类型" prop="type"></el-table-column>
      <el-table-column label="支付金额" prop="price"></el-table-column>
      <el-table-column label="支付时间" prop="create_time" width="180px"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      options: [
        {
          value: '选项1',
          label: '请选择'
        },
        {
          value: '选项2',
          label: '二手房出租'
        },
        {
          value: '选项3',
          label: '有房出租'
        },
        {
          value: '选项4',
          label: '我想买个房'
        },
        {
          value: '选项5',
          label: '我想租个房'
        }
      ],
      value: '',
      queryForm: {
        keyword: ''
      },
      tableData: [],
      result: []
    }
  },
  methods: {
    handleDelete (row) {
      this.$http.delete(`/order/${row.id}`).then((res) => {
        if (res.data.code !== 1) {
          this.$message.error(res.data.message)
        } else {
          this.$message.success(res.data.message)
          this.getOrderList(this.queryForm)
        }
      })
    },
    findKeyWord () {
      this.getOrderList(this.queryForm)
    },
    getOrderList () {
      this.$http.get('/order', {
        params: this.queryForm
      }).then(res => {
        if (res.data.code === 1) {
          this.tableData = res.data.data
        }
      })
    },
    changeOption (val) {
      this.result = this.tableData.filter(item => {
        return item.type.includes(val)
      })
    }
  },
  created () {
    this.getOrderList(this.queryForm)
  }
}
</script>

<style scoped>
.el-row,
.el-col {
  display: flex;
  align-items: center;
}

.el-col span {
  width: 72px;
}
</style>
